<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品首页</title>
    <script src="ststic/js/vue.js"></script>
    <script src="ststic/js/jquery.js"></script>


    <style>

        #app{
            margin-left:500px;
            border: 1px solid #333333;
            width: 450px;
            height: 650px;
        }

        .active{
            background-color: skyblue;
        }
        .all{
            border-collapse:separate;
            border-spacing:20px 60px;
        }
        .all .part td{
            margin-left: 20px;
        }
        .count{

            margin-left: 20px;
        }
        .little{
            margin-left: 270px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
<div id="app">

    <div class="little">
        <button @click="add">新增</button>
    </div>
    <table class="all">
        <tr class="part">
            <th>id</th>
            <th>产品名</th>
            <th>价格</th>
            <th>品牌</th>
            <th>操作</th>
        </tr>

        <tr v-for="(item,index) in products" :key="item.id">
            <td>{{item.id}}</td >
            <td>{{item.name}}</td>
            <td>￥{{item.price}}</td>
            <td>{{item.brand}}</td>
            <td>
                <button @click="modify(item.id)">修改</button>
                <button @click="del(item.id)">删除</button></td>
        </tr>
    </table>

    <div class="count">
        <button @click="turn(-1)">&lt;</button>
        <button v-for="item in countOfPage" @click="page(item)" :class="{active:item==currentPage}">{{item}}</button>

        <button @click="turn(1)">&gt;</button>
    </div>

</div>

<script>

    var vm = new Vue({
        el: '#app',
        data: {
            products: [],
            currentPage: 1,
            perPage: 12,//每页数量
            countOfPage: null
        },
        methods: {
            page(num) {
                this.currentPage = num;
                this.req();
            },
            turn(n) {
                if ((this.currentPage == 1 && n < 0) || (this.currentPage == this.countOfPage && n > 0)) {
                    return;
                }
                this.currentPage+=n;
                this.req();
            },

            req() {
                $.ajax('/productPage', {
                    data: {
                        currentPage: this.currentPage,
                        perPage: this.perPage,
                    },
                    success: data => {
                        this.countOfPage = Math.ceil(data.sum / this.perPage);
                        this.products = data.item;
                    }
                })
            },
            add(){
                window.open('/add.html', '_self')
            },
            del(id){
                $.ajax('/del',{
                    data:{
                        id:id
                    },
                    success:data=>{
                        if(data.code == 200){
                            let index = this.products.findIndex(item => {
                                return item.id == id;
                            });
                            this.products.splice(index, 1);
                        }
                    }
                })
            },

            modify(id){
                window.open(`/modify.html?id=${id}`, '_self')
            }
        },
        created() {
            this.req();
        }
    })

</script>


